<template>
	<view class="home">
		<view class="header" v-if="token">{{userInfo.storeName}}</view>
		<button v-else class="name" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">请登录</button>
		<view class="storeName">
			<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/locationIcon.png"></image>
			<text>北京市·海龙大厦店</text>
		</view>
		<view class="container">
			<view class="cont">
				<view class="titleBox">
					<text>经营数据</text>
					<text class="tips">统计时间截止15分钟之前</text>
					<view class="refBox" @click="refresh">
						<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/refreshIcon.png"></image>
						<text>刷新</text>
					</view>
				</view>
				<view class="dateTabs">
					<view v-for="(item,i) in dateTabs" :key="i" :class="activeDate == item.id ? 'active tab' : 'tab'"
						@click="changeDate(item.id)">{{item.value}}</view>
				</view>
				<view class="incomeBox">
					<view class="title">实际收入(元)</view>
					<view class="num">{{storeDetailData.actualPayment}}</view>
				</view>
				<view class="detail">
					<view class="box">
						<view class="num">{{storeDetailData.visitor}}</view>
						<view class="title">访客数量</view>
					</view>
					<view class="box">
						<view class="num">{{storeDetailData.effectiveOrder}}</view>
						<view class="title">有效订单</view>
					</view>
					<view class="box">
						<view class="num">{{storeDetailData.conversionRate * 100}}%</view>
						<view class="title">下单转化率</view>
					</view>
					<view class="box">
						<view class="num">{{storeDetailData.openStageIncome}}</view>
						<view class="title">台球收入(元)</view>
					</view>
					<view class="box">
						<view class="num">{{storeDetailData.rechargeIncome}}</view>
						<view class="title">充值收入(元)</view>
					</view>
					<view class="box">
						<view class="num">{{storeDetailData.registrationFee}}</view>
						<view class="title">报名费(元)</view>
					</view>
				</view>
			</view>

			<view class="cont">
				<view class="titleBox">
					<text>基础工具</text>
				</view>
				<view class="tools">
					<view class="box" @click="toSRecord">
						<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/store_icon1.png"></image>
						<view class="name">扫码记录</view>
					</view>
					<view class="box" @click="toGMV">
						<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/store_icon2.png"></image>
						<view class="name">GMV概览</view>
					</view>
					<view class="box" @click="toCourse">
						<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/store_icon3.png"></image>
						<view class="name">课表</view>
					</view>
					<view class="box" @click="toUserList">
						<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/store_icon4.png"></image>
						<view class="name">用户列表</view>
					</view>
				</view>
			</view>

<!-- 			<view class="cont last">
				<view class="titleBox">
					<text>其他工具</text>
				</view>
				<view class="tools">
					<view class="box" @click="toMessage">
						<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/store_icon5.png"></image>
						<view class="name">消息列表</view>
					</view>
					<view class="box" @click="toServer">
						<image src="https://cloudcdn.noitom.com.cn/noitom2/billiard/store_icon6.png"></image>
						<view class="name">企业服务概览</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		authApplets,
		authPhone,
		getStoreDetail
	} from "@/api/getData.js";
	export default {
		data() {
			return {
				decodePhoneParams: {
					code: null,
					encryptedData: null,
					iv: null,
					sessionKey: null,
					openId: null
				},
				dateTabs: [{
					id: 0,
					value: '今日'
				}, {
					id: 1,
					value: '昨日'
				}, {
					id: 2,
					value: '近一周'
				}, {
					id: 3,
					value: '近一月'
				}],
				activeDate: 0,
				storeDetailData:{}
			}
		},
		onLoad() {
			
			const dd = new Date()
			const y = dd.getFullYear()
			const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
			const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
			this.currentDate = y + '-' + m + '-' + d
			this.getCode()
		},
		onShow() {},
		methods: {
			//运营数据
			async getStoreDetail(){
				const data = {
					type:this.activeDate,
					storeId:3,
					// storeId:this.userInfo.storeId,
					currentDate:this.currentDate
				}
				const {
					data: res
				} = await getStoreDetail(data)
				console.log(res,333333333333333)
				this.storeDetailData = res.data
			},
			//获取用户code
			getCode() {
				var that = this
				uni.login({
					provider: 'weixin',
					success: res => {
						console.log(res, 'getCode')
						that.userAuth(res.code)
					}
				});
			},

			//用户code授权
			async userAuth(code) {
				const {
					data: res
				} = await authApplets(code)
				console.log(res, 'userAuth')
				if (res.data.token) {
					this.$store.commit('SET_TOKEN', res.data.token);
					const setData = {}
					setData.storeName = res.data.storeName
					setData.storeId = res.data.storeId
					this.$store.commit('SET_USERINFO', setData);
					this.getStoreDetail()
				} else {
					this.decodePhoneParams.sessionKey = res.data.sessionKey
					this.decodePhoneParams.openId = res.data.openId
					// this.userInfoParams.openId = res.data.openId
				}
			},
			
			// 获取手机号
			getPhoneNumber(e) {
				this.decodePhoneParams.code = e.detail.code
				this.decodePhoneParams.encryptedData = e.detail.encryptedData
				this.decodePhoneParams.iv = e.detail.iv
				this.authPhone()
				console.log(e)
			},
			//用户手机号授权
			async authPhone() {
				const {
					data: res
				} = await authPhone(this.decodePhoneParams)
				if (res.data.token) {
					this.$store.commit('SET_TOKEN', res.data.token);
					const setData = {}
					setData.storeName = res.data.storeName
					setData.storeId = res.data.storeId
					this.$store.commit('SET_USERINFO', setData);
					uni.$showMsg('授权成功', 1500, 'success')
					this.getStoreDetail()
				} else {}
			},
			changeDate(id) {
				this.activeDate = id
				this.getStoreDetail()
			},
			refresh(){
				this.getStoreDetail()
			},
			toSRecord() {
				uni.navigateTo({
					url: "/pages/other/scanningRecord"
				});
			},
			toGMV() {
				uni.navigateTo({
					url: "/pages/other/GMVOverview"
				});
			},
			toCourse() {
				uni.navigateTo({
					url: "/pages/other/courseList"
				});
			},
			toUserList() {
				uni.navigateTo({
					url: "/pages/other/userList"
				});
			},
			toMessage() {
				uni.navigateTo({
					url: "/pages/other/messageList"
				});
			},
			toServer() {
				uni.navigateTo({
					url: "/pages/other/service"
				});
			}
		}
	}
</script>

<style lang="less">
	.home {
		.header {
			height: 68rpx;
			padding: 0 32rpx;
			background: #DE1645;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 68rpx;
		}

		.storeName {
			height: 68rpx;
			line-height: 68rpx;
			background: #fff;

			image {
				width: 18rpx;
				height: 20rpx;
				margin-left: 32rpx;
				margin-right: 10rpx;
			}

			text {
				font-size: 24rpx;
			}
		}

		.container {
			padding: 0 32rpx;

			.cont {
				background: #fff;
				border-radius: 16rpx;
				padding: 32rpx;
				line-height: 1;
				margin-top: 32rpx;

				.tools {
					display: flex;
					margin-top: 40rpx;

					.box {
						width: 25%;
						text-align: center;

						image {
							width: 76rpx;
							height: 76rpx;
							margin-bottom: 17rpx;
						}

						.name {
							font-size: 24rpx;
							color: #5B5B5B;
							margin-bottom: 8rpx;
						}
					}
				}

				.titleBox {
					display: flex;
					font-size: 32rpx;
					align-items: center;

					.tips {
						font-size: 24rpx;
						margin-left: 16rpx;
						color: #A4A4A4;
					}

					.refBox {
						margin-left: auto;

						image {
							width: 28rpx;
							height: 28rpx;
							margin-right: 11rpx;
							vertical-align: middle;
						}

						text {
							font-size: 24rpx;
							color: #A4A4A4;
							vertical-align: middle;
						}
					}
				}

				.dateTabs {
					margin-top: 32rpx;
					display: flex;

					.tab {
						height: 42rpx;
						padding: 0 20rpx;
						color: #5B5B5B;
						font-size: 24rpx;
						line-height: 42rpx;
						background: #F6F6F6;
						border-radius: 8rpx;
						margin-right: 24rpx;
					}

					.active {
						background: #DE1645;
						color: #fff;
					}
				}

				.incomeBox {
					padding: 32rpx 24rpx;
					background: #F6F6F6;
					border-radius: 16rpx;
					margin-top: 32rpx;

					.title {
						font-size: 24rpx;
					}

					.num {
						font-size: 40rpx;
						font-weight: bold;
						color: #DE1645;
						margin-top: 18rpx;
					}
				}

				.detail {
					display: flex;
					flex-wrap: wrap;
					margin-top: 40rpx;

					.box {
						line-height: 1;
						width: 33%;
						padding: 32rpx 0 5rpx 14rpx;
						box-sizing: border-box;
						border-right: 1px solid #E2E2E2;

						.num {
							font-size: 36rpx;
						}

						.title {
							font-size: 24rpx;
							margin-top: 17rpx;
							color: #A4A4A4;
						}
					}

					.box:nth-child(-n+3) {
						border-bottom: 1px solid #E2E2E2;
						padding: 5rpx 0 32rpx 14rpx;
					}

					.box:nth-child(3n) {
						border-right: 0;
					}
				}
			}

			.last {
				margin-bottom: 32rpx;
			}
		}
	}
</style>
